<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <title>在线论坛用户</title>

    <style>
        .container{
            margin-top: 100px;
        }

    </style>
</head>
<body>
    <div class="container" id="show">
        <table class="table table-light table-hover" id="admin-list">
            <div style="text-align: center; font-size: 20px; font-weight:bold;">用户列表</div>
            <thead>
                <tr>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>电话</th>
                </tr>
            </thead>
            <tbody v-for="user in allUser">
                <tr>
                    <td>{{user.username}}</td>
                    <td>{{user.password}}</td>
                    <td>{{user.phone}}</td>

                </tr>
            </tbody>
        </table>
    </div>
</body>

<script src="../js/axios-min.js"></script>
<script src="../js/vue.js"></script>
<script>

    new Vue({
        el: "#show",
        data() {
            return {
                allUser: []
            }
        },
        mounted() {
            //页面加载完成，发送axios的异步请求
            var _this = this;
            axios({
                method: "post",
                url: "../User/saus"
            }).then(function (resp) {
                _this.allUser = resp.data;
            })
        }
    })

</script>
</html>